<template>
  <div
      v-loading="loading"
      class="app-container"
      :element-loading-text="loadingText"
  >
    <!-- 挂号编号的查询条件开始 -->
    <el-form ref="queryForm" label-width="88px">
      <el-form-item label="挂号单ID" prop="regId">
        <el-input
            v-model="regId"
            clearable
            placeholder="请输入挂号单号"
            size="small"
            style="width:300px"
        />
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">读取IC卡</el-button>
      </el-form-item>
    </el-form>
    <!-- 挂号编号的查询条件结束 -->
    <!-- 挂号输入框下面的所有内容开始 -->
    <div v-if="careHistory.regId!==undefined">
      <!-- 病例信息开始 -->
      <el-card style="margin-bottom: 5px">
        <el-form label-position="right" label-width="120px" inline class="demo-table-expand">
          <el-form-item label="挂号单号:">
            <span v-text="careHistory.regId" />
          </el-form-item>
          <el-form-item label="医生姓名:">
            <span v-text="careHistory.userName" />
          </el-form-item>
          <el-form-item label="科室名称:">
            <span v-text="careHistory.deptName" />
          </el-form-item>
          <el-form-item label=" 患者姓名:">
            <span v-text="careHistory.patientName" />
          </el-form-item>
          <el-form-item label="就诊时间:">
            <span v-text="careHistory.careTime" />
          </el-form-item>
          <el-form-item label="主诉:">
            <span v-text="careHistory.caseTitle" />
          </el-form-item>
          <el-form-item label="诊断信息:">
            <span v-text="careHistory.caseResult" />
          </el-form-item>
          <el-form-item label="医生建议:">
            <span v-text="careHistory.doctorTips" />
          </el-form-item>
        </el-form>
      </el-card>
      <!-- 病例信息结束 -->
      <!-- 工具按钮开始 -->
      <el-card style="margin-bottom: 5px">
        <el-button type="success" icon="el-icon-finished" @click="handleSelectAll">全选</el-button>
        <el-button type="success" icon="el-icon-finished" @click="handleUnSelectAll">取消全选</el-button>
        <el-button type="danger" icon="el-icon-bank-card" @click="handleDoMedicine">发药</el-button>
      </el-card>
      <!-- 工具结束开始 -->
      <!-- 未支付的处方信息开始 -->
      <el-card style="margin-bottom: 5px">
        <el-collapse v-if="careOrders.length>0" v-model="activeNames">
          <el-collapse-item v-for="(item,index) in careOrders" :key="index" :name="index">
            <template slot="title">
              【药用处方】【{{ index+1 }}】【处方总额】:￥{{ allAmounts }}
            </template>
            <el-table
                ref="refTable"
                v-loading="loading"
                border
                :data="item"
                :row-class-name="tableRowClassName"
                @selection-change="handleCareOrderItemSelectionChange($event,item.coId)"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="序号" align="center" type="index" width="50" />
              <el-table-column label="药品名称" align="center" prop="itemName" />
              <el-table-column label="数量" align="center" prop="num" />
              <el-table-column label="单价(元)" align="center" prop="price" />
              <el-table-column label="金额(元)" align="center" prop="amount" />
              <el-table-column label="备注" align="center" prop="remark" />
              <el-table-column label="状态" align="center" prop="status"  :formatter="statusFormatter" />
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-card>
      <!-- 未支付的处方信息结束 -->
      <!-- 挂号输入框下面的所有内容结束 -->
    </div>
    <div v-else style="text-align:center">请输入正确的挂号单ID查询</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 整体遮罩
      loading: false,
      // 设置遮罩层的文字
      loadingText: '',
      // 用户输入的挂号单号
      regId: undefined,
      // 病例对象
      careHistory: {},
      // 处方信息
      careOrders: [],
      allAmounts:0.00,
      // 处方详情的状态字典
      statusOptions: [],
      // 当前选中的所有项目集合
      itemObjs: [],
      // 展开的折叠面板的名字
      activeNames: []
    }
  },
  created() {
    // 加载状态的字典数据
    // 加载详情状态的字典数据
    /*this.$http.get('/system-manage/systems/dict/dept/his_order_details_status').then(res => {
      this.statusOptions = res.data.data
    })*/
    // getDictDataAPI('his_order_details_status').then(res => {
    //   this.statusOptions = res.data
    // })
  },
  methods: {
    // 查询
    handleQuery() {
      if (this.regId === '' || this.regId === null || this.regId === undefined) {
        this.$message.warning( '请输入挂号单号')
        this.resetCurrentParams()
        return
      }
      this.careHistory = {}
      this.careOrders = []
      // 清空之前选中的
      this.itemObjs = []
      this.loading = true
      this.loadingText = '数据查询中，请稍后...'
      this.allAmount= 0.00
      this.allAmounts= 0.00
      if (this.regId !== undefined || this.regId !== '' || this.regId !== null) {
        this.$http.get("/careHistory/queryByRegId/"+this.regId+'/1').then(res => {
          this.loading = false
          this.loadingText = ''
          if (res.data.data === null){
            this.$message.warning('该挂号单号未有符合条件的信息')
            this.resetCurrentParams()
            return
          }
          this.careHistory = res.data.data

          this.careOrders = res.data.data.careOrderItem;
          let ypList = [];

          //求所有处方中是用药处方的总价
          for (let i = 0; i < this.careOrders.length; i++) {
            //求所有处方中是用药处方的总价
            if (this.careOrders[i].itemType === '0'){
              ypList.push(this.careOrders[i]);
              this.allAmounts += parseInt(this.careOrders[i].amount)
            }
          }
          this.careOrders=[];
          this.careOrders.push(ypList); // this.careOrders[]

          /*let b = 0.00
          res.data.data.careOrderItem.forEach((item)=>{
            b += item.amount
          })
          this.allAmounts = b
          this.careOrders.push(res.data.data.careOrderItem)*/
        }).catch(() => {
          this.$message.error('查询失败')
          this.loading = false
          this.loadingText = ''
        })
      }else {
        this.$message.error('请输入正确的挂号单号')
      }
    },
    // 翻译处方详情状态
    statusFormatter(row) {
      let statusLabel = "未知";
      if (row.status === row.dictValue){
        statusLabel = row.dictLabel
      }
      return statusLabel
    },
    // 监听多个表格的checkbox的选中事件
    handleCareOrderItemSelectionChange(selection, coId) {
      if (this.itemObjs.length === 0) {
        this.itemObjs = selection
      } else {
        for (let i = 0; i < this.itemObjs.length; i++) {
          const obj = this.itemObjs[i]
          if (obj.coId === coId) {
            this.itemObjs.splice(i, 1)
            i--
          }
        }
        // 最后再来添加
        selection.filter(newItem => {
          this.itemObjs.push(newItem)
        })
      }
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },
    // 全选择
    handleSelectAll() { // 先取消再反选择
      const tables = this.$refs.refTable
      tables.filter(t => {
        t.clearSelection()
        t.toggleAllSelection() // 注意不要用错方法了
      })
    },
    // 取消全选
    handleUnSelectAll() {
      const tables = this.$refs.refTable
      tables.filter(t => {
        t.clearSelection()
      })
    },
    // 发药
    handleDoMedicine() {
      if (!this.careHistory.regId) {
        this.$message.error('请输入挂号单ID查询')
        return
      } else if (this.itemObjs.length === 0) {
        this.$message.error('请选择要发药的药品名')
        return
      } else {
        // 组装数据
        const itemIds = this.itemObjs.map(item => item.itemId)
        console.log(itemIds+"***********************")
        // 发送请求
        this.loading = true
        this.loadingText = '发药中。。。'
        this.$confirm('是否确定发药?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // ITEM1834504647970713600,ITEM1834504647068938240,ITEM1834504203831668736,ITEM1834504203454181376=====
          this.$http.post("/careOrderItemjsh/sendMedicine?itemIds="+itemIds).then(res => {
            if (res.data.code === 200) {
              this.$message.success('药品发放成功')
              this.handleQuery()
              this.loading = false
            } else {
              this.$message.error(res.data.msg)
              this.loading = false
            }
          })
        }).catch(() => {
          this.$message.info('发药已取消')
          this.loading = false
        })
      }
    },
    // 清空careHistory和careOrders
    resetCurrentParams() {
      this.careHistory = {}
      this.careOrders = []
    }
  }
}
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
